<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="table.css">
	<script src="table.js"></script>
</head>
<body>
	<table id="sales1">
		<caption>Quarterly sales 可以排序的单元格*</caption>
		<thead>
			<tr>
				<th>Companies</th>
				<th>Q1</th>
				<th>Q2</th>
				<th>Q3</th>
				<th>Q4</th>
			</tr>
		</thead>
		<tbody contenteditable="true">
			<tr>
				<td>Company A</td>
				<td>$621</td>
				<td>$942</td>
				<td>$224</td>
				<td>$486</td>
			</tr>
			<tr>
				<td>Company B</td>
				<td>$147</td>
				<td>$1,325</td>
				<td>$683</td>
				<td>$524</td>
			</tr>
			<tr>
				<td>Company C</td>
				<td>$135</td>
				<td>$2,342</td>
				<td>$33</td>
				<td>$464</td>
			</tr>
			<tr>
				<td>Company D</td>
				<td>$164</td>
				<td>$332</td>
				<td>$331</td>
				<td>$438</td>
			</tr>
			<tr>
				<td>Company E</td>
				<td>$199</td>
				<td>$902</td>
				<td>$336</td>
				<td>$1,427</td>
			</tr>
		</tbody>
	</table>
	<i>点击第一行单元格排序</i>
	<table id="sales2">
		<caption>Quarterly sales 可以拖动的列*</caption>
		<thead>
			<tr>
				<th>Companies</th>
				<th>Q1</th>
				<th>Q2</th>
				<th>Q3</th>
				<th>Q4</th>
			</tr>
		</thead>
		<tbody contenteditable="true">
			<tr>
				<td>Company A</td>
				<td>$621</td>
				<td>$942</td>
				<td>$224</td>
				<td>$486</td>
			</tr>
			<tr>
				<td>Company B</td>
				<td>$147</td>
				<td>$1,325</td>
				<td>$683</td>
				<td>$524</td>
			</tr>
			<tr>
				<td>Company C</td>
				<td>$135</td>
				<td>$2,342</td>
				<td>$33</td>
				<td>$464</td>
			</tr>
			<tr>
				<td>Company D</td>
				<td>$164</td>
				<td>$332</td>
				<td>$331</td>
				<td>$438</td>
			</tr>
			<tr>
				<td>Company E</td>
				<td>$199</td>
				<td>$902</td>
				<td>$336</td>
				<td>$1,427</td>
			</tr>
		</tbody>
	</table>
	<i>支持键盘操作,Tab选中,左右方向键移动</i>
	<table id="sales3">
		<caption>Quarterly sales 可以增、删、改写的行*</caption>
		<thead>
			<tr>
				<th>Companies</th>
				<th>Q1</th>
				<th>Q2</th>
				<th>Q3</th>
				<th>
					operation:
					<button data-opt="add">add</button>
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Company A</td>
				<td>$621</td>
				<td>$942</td>
				<td>$224</td>
				<td><button data-opt="del">del</button></td>
			</tr>
			<tr>
				<td>Company B</td>
				<td>$147</td>
				<td>$1,325</td>
				<td>$683</td>
				<td><button data-opt="del">del</button></td>
			</tr>
			<tr>
				<td>Company C</td>
				<td>$135</td>
				<td>$2,342</td>
				<td>$33</td>
				<td><button data-opt="del">del</button></td>
			</tr>
			<tr>
				<td>Company D</td>
				<td>$164</td>
				<td>$332</td>
				<td>$331</td>
				<td><button data-opt="del">del</button></td>
			</tr>
			<tr>
				<td>Company E</td>
				<td>$199</td>
				<td>$902</td>
				<td>$336</td>
				<td><button data-opt="del">del</button></td>
			</tr>
		</tbody>
	</table>
	<i>双击单元格修改内容</i>
</body>
 	<script>
 	var table1 = new TableSort('sales1');
 	var table2 = new ColumnDrag('sales2');
 	var table3 = new TableEdit('sales3');
 	</script>
</html>